<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/%BASE_URL%/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Login</title>

    <link rel="shortcut icon" href="data:,">
    <link rel="stylesheet" href="login/login.css">
    <link rel="stylesheet" href="css">

    <!-- load locale -->
    <script>
        var localeStrings = {
            username: "Username",
            password: "Password",
            login: "Login",
            invalid_credentials: "Invalid credentials",
            internal_error: "Unexpected internal error. See logs for more details"
        };
    </script>
    <script src="login/locale"></script>
</head>

<script>
    function login() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var returnURL = document.getElementById("returnURL").value;

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "login", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    window.location.replace(returnURL);
                } else {
                    document.getElementsByClassName("login-error")[0].innerHTML = localeStrings.invalid_credentials;
                }
            }
        };
        xhr.onerror = function() {
            document.getElementsByClassName("login-error")[0].innerHTML = localeStrings.internal_error;
        };
        var body = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password) + "&returnURL=" + encodeURIComponent(returnURL);
        xhr.send(body);
    }
</script>

<body class="login">
    <div class="dialog">
        <div class="card">
            <form action="login" method="POST" onsubmit="event.preventDefault(); login();">
                <div class="form-group">
                    <label for="username"><h6 id="username-heading">Username</h6></label>
                    <input class="text-input form-control" id="username" name="username" type="text" placeholder="Username" />
                </div>
                <div class="form-group">
                    <label for="password"><h6 id="password-heading">Password</h6></label>
                    <input class="text-input form-control" id="password" name="password" type="password" placeholder="Password" />
                </div>
                <div class="login-error">
                    {{.Error}}
                </div>

                <input type="hidden" id="returnURL" name="returnURL" value="{{.URL}}" />

                <div>
                    <input id="login-button" class="btn btn-primary" type="submit" value="Login">
                </div>
            </form>
        </div>
    </div>

</body>

<script>
    document.getElementById("username-heading").innerText = localeStrings.username;
    document.getElementById("password-heading").innerText = localeStrings.password;
    document.getElementById("username").placeholder = localeStrings.username;
    document.getElementById("password").placeholder = localeStrings.password;
    document.getElementById("login-button").value = localeStrings.login;
</script>
</html>
